<template>
  <basic-container class="content">
    <div class="fl">
      <div class="box-fl-title" @click="unFoldAll">检查项情况</div>
      <el-tree :data="treeList" ref="treeBox" node-key="id" :render-content="renderContent" @node-click="handleNodeClick" />
    </div>
    <div class="fr">
      <dataList
        :pageInfo="pager"
        placeholder="请输入检查项名称"
        :listData="tableData"
        :selectData="selectDataArr"
        searchName="inspectionName"
        :filterList="filterList"
        :menuList="['add', 'delete', { export: '导出' }]"
        @menu-click="handleMenuClick"
        @resetFilter="handleReset"
        openSelection
      >
        <el-table ref="multipleTable" :data="tableData" @selection-change="$event => (selectDataArr = $event)">
          <el-table-column type="selection" width="55" />
          <!--<el-table-column prop="sort" label="排序" width="100" />-->
          <el-table-column prop="inspectionName" label="检查项" width="180" />
          <el-table-column prop="inspectionWay" label="检查方法" min-width="250" show-overflow-tooltip />
          <el-table-column prop="remarks" label="备注" show-overflow-tooltip width="300" />
          <el-table-column label="操作" fixed="right" width="80">
            <template slot-scope="scope">
              <el-link @click="showAddOrEdit('edit', scope.row)" type="primary" :underline="false">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>
      </dataList>
    </div>
    <el-dialog custom-class="small-padding-dialog" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" @close="$refs.form.resetFields()">
      <el-form :model="form" ref="form" :rules="rules" class="form-wrap" style="padding-top:0px;" label-position="top">
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input v-halfCharCode v-model="form.sort" :min="1" :max="999" style="width:100%;" placeholder="请选择排序值" />
        </el-form-item>
        <el-form-item label="物业类型" :label-width="formLabelWidth" prop="projectType">
          <el-select v-model="form.projectType" :disabled="title == '编辑检查方法' ? true : false" @change="getTinspectionName" placeholder="-=请选择=- " style="width:100%">
            <el-option v-for="item in propertyTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查项名称" :label-width="formLabelWidth" prop="inspectionName">
          <el-select clearable v-model="form.inspectionName" :disabled="title == '编辑检查方法' ? true : false" placeholder="请选择">
            <el-option v-for="item in restaurants" :key="item.value" :label="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查方法" :label-width="formLabelWidth" prop="inspectionWay">
          <el-input v-halfCharCode v-model="form.inspectionWay" autocomplete="off" maxlength="80" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="说明" :label-width="formLabelWidth" prop="remarks" class="full">
          <el-input v-halfCharCode v-model="form.remarks" autocomplete="off" placeholder="请输入" maxlength="200" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="preservation('form')">保存</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
.box-fl-title {
  font-size: 16px;
  color: rgb(102, 102, 102);

  font-weight: 700;
  height: 49.8px;

  padding: 14px 21px;
  border-bottom: 1px solid #eaeaea;
}
/deep/ .el-tree-node__content {
  height: 42px;
  border-bottom: 1px solid #eaeaea;
}
/deep/ .el-tree-node__content:hover {
  background-color: #d6f5ff;
}
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #d6f5ff;
  color: #1563d1;
}

.content {
  /deep/.container-wrap {
    overflow: hidden;
  }

  .fl {
    float: left;
    width: 19.5%;
    border: 1px solid #eaeaea;
  }

  .fr {
    padding: 14px;

    float: right;
    width: 79.5%;
    border: 1px solid #eaeaea;
    /deep/ .el-table__row {
      height: 44px;
    }
  }
}
</style>
